import React, {Component} from 'react';
import AppRouter from '../route/AppRouter';
import {Form, Icon, Input, Button, message, Layout, } from 'antd';
// import Login from 'ant-design-pro/lib/Login';
import moment from 'moment';
import './Login.css'

const {Header, Content, Footer, Sider} = Layout;
const FormItem = Form.Item;

//新登陆页面参数
// const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
class LoginDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            password: '',
            errorMessage: '',
        }

    }

    handleLogin = (e) => {
        e.preventDefault();
        const {phone, password} = this.state;
        const jsonData = {
            'phone': phone,
            'password': password,
        };
        fetch("/api/login", {
            method: 'POST',
            credentials: "include",
            body: JSON.stringify(jsonData),
            headers: {
                'Content-Type': 'application/json',
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0 && data['info']['phone'] === phone && data['info']['state'] === 1) {//判定是否成功
                    window.localStorage.token = data.token;
                    window.localStorage.info = data['info'];
                    window.localStorage.name = data['info']['name'];
                    window.localStorage.privilege = data['info']['privilege'];
                    window.localStorage.state = data['info']['state'];
                    window.localStorage.department = data['info']['department'];
                    window.localStorage.authorization = 'bearer ' + data.token;
                    window.localStorage.time = Date();
                    this.props.history.push('/index')
                }
                else
                    message.error('登录失败！')
            })
            .catch(error => console.error('Error:', error))
    };


    handleChangePhone = (e) => {
        this.setState({phone: e.target.value});
    };

    handleChangePassword = (e) => {
        this.setState({password: e.target.value});
    };


    render() {
        const {phone, password} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="login">
                <img id="logo"
                     src='https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=4669515db8389b502cf2e800e45c8eb8/ac4bd11373f082022a17da7c4afbfbedaa641bef.jpg'/>
                <Form onSubmit={this.handleLogin} className="login-form">
                    <FormItem>
                        <h2 id='pleaseLogin'>欢迎登录</h2>
                        {getFieldDecorator('phone', {
                            rules: [{required: true, message: '请输入注册手机号!'},
                                {pattern: '\\d{11}', message: '请输入11位手机号!'}],
                        })(
                            <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                   placeholder="请输入注册手机号" setFieldsValue={phone} onChange={this.handleChangePhone}/>
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{required: true, message: '请输入密码!'},
                                {min: 6, message: '请输入6位以上密码'}],
                        })(
                            <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                                   placeholder="请输入密码" setFieldsValue={password} onChange={this.handleChangePassword}/>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                        或者<a href="/reg">注册账号！</a>
                    </FormItem>
                </Form>
                <Footer style={{textAlign: 'center'}} className="footer">
                    SmartLab Design ©2018 Powered By 武汉理工大学智能技术实验室
                </Footer>
            </div>
        );
    }

    // state = {
    //     notice: '',
    //     type: 'tab2',
    //     autoLogin: true,
    // }
    // onSubmit = (err, values) => {
    //     console.log('value collected ->', { ...values, autoLogin: this.state.autoLogin });
    //     if (this.state.type === 'tab1') {
    //         this.setState({
    //             notice: '',
    //         }, () => {
    //             if (!err && (values.username !== 'admin' || values.password !== '888888')) {
    //                 setTimeout(() => {
    //                     this.setState({
    //                         notice: 'The combination of username and password is incorrect!',
    //                     });
    //                 }, 500);
    //             }
    //         });
    //     }
    // }
    // onTabChange = (key) => {
    //     console.log(key)
    //     this.setState({
    //         type: key,
    //     });
    // }
    // changeAutoLogin = (e) => {
    //     this.setState({
    //         autoLogin: e.target.checked,
    //     });
    // }
    // render() {
    //     return (
    //         <Login/*默认的三个定义*/
    //             defaultActiveKey={this.state.type}
    //             onTabChange={this.onTabChange}
    //             onSubmit={this.onSubmit}
    //         >
    //             <Tab key="tab1" tab="Account">
    //                 {
    //                     this.state.notice &&
    //                     <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
    //                 }
    //                 <UserName name="username" />
    //                 <Password name="password" />
    //             </Tab>
    //             <Tab key="tab2" tab="Mobile">
    //                 <Mobile name="mobile" />
    //                 <Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
    //             </Tab>
    //             <div>
    //                 <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>Keep me logged in</Checkbox>
    //                 <a style={{ float: 'right' }} href="">Forgot password</a>
    //             </div>
    //             <Submit>Login</Submit>
    //             <div>
    //                 Other login methods
    //                 <span className="icon icon-alipay" />
    //                 <span className="icon icon-taobao" />
    //                 <span className="icon icon-weibo" />
    //                 <a style={{ float: 'right' }} href="">Register</a>
    //             </div>
    //         </Login>
    //     );
    // }
}

const WrappedNormalLoginForm = Form.create()(LoginDemo);

export default WrappedNormalLoginForm;

